<template>
	<view class="refund-result">
		<n-loading></n-loading>
		<view class="result-title">
			<hr>
			<text class="title" v-if="orderInfo.apply_cancel==1">
				{{orderInfo.status==1?'已提交申请，等待商家处理':
				(orderInfo.status==2?(orderInfo.billReship==null?'已处理退货申请，请尽早退货':'您已成功退货，等待商家收货后确认处理'):
				(orderInfo.status==3?'审核未通过':
				(orderInfo.status==4?'退货已超时':'退货成功')))}}
			</text>
			<text class="title" v-if="orderInfo.apply_cancel==2">您已主动撤销申请</text>
		</view>
		<view v-if="orderInfo">
			<!-- 未撤销 -->
			<view>
				<!--  退后待商家同意退货 -->
				<view class="result-info" v-if="orderInfo.status!=2">
					<!-- 申请中，未审核 -->
					<view class="result-info-one" v-if="orderInfo.status==1 && orderInfo.apply_cancel==1">
						<text>等待商家审核</text>
						<text class="info-tips">商家审核通过后可正常退货</text>
					</view>
					<!-- 主动撤销 -->
					<view v-if="orderInfo.status==1 && orderInfo.apply_cancel==2">
						<text>如有疑问请咨询客服</text>
					</view>
					<!-- 申请中，审核未通过 -->
					<view class="result-info-one" v-if="orderInfo.status==3 || orderInfo.status==4 || orderInfo.status==5">
						<text>如有疑问请咨询客服</text>
						<text class="info-tips">咨询客服了解订单疑问</text>
					</view>
					<view class="">
						<button v-if="orderInfo.afterSalesTimes == null && orderInfo.status==1 && orderInfo.apply_cancel==1" @tap="revokeApply(orderInfo.aftersales_id,orderInfo.order_id)">撤销申请</button>
						<button v-if="orderInfo.status==2 || orderInfo.status==3 || orderInfo.status==4 || orderInfo.status==5" class="button1" @tap="tipsshow = true">联系客服</button>
					</view>
				</view>
				<!-- 商家同意退货，待买家退货 -->
				<view class="approved" v-if="orderInfo.status==2 && orderInfo.billReship==null">
					<view class="returnMethod" @tap="returnMethodShowGo">
						<text>退货方式</text>
						<view class="methodVal">{{returnMethod}}</view>
						<u-icon name="arrow-right" color="#666" size="28"></u-icon>
					</view>
					<view class="handleBox">
						<view class="handleCont">
							<view class="handleContLeft">
								<view class="handleTips">请退货并填写物流信息</view>
								<view class="handledown">
									还剩
									<u-count-down :timestamp="termOfValidity-dateDiff(orderInfo.audit_at)" separator="zh" bg-color="transparent" color="#FF5238" separator-color="#666" separator-size="24" font-size="24"></u-count-down>
								</view>
							</view>
							<view class="handleContRight">
								<button class="mb16" v-if="orderInfo.afterSalesTimes == null" @tap="revokeApply(orderInfo.aftersales_id,orderInfo.order_id)">撤销申请</button>
								<button class="button1" v-if="returnMethodVal=='1'" @tap="fillReturnLogistics(orderInfo.aftersales_id)">填写物流</button>
								<button class="button1" v-if="returnMethodVal=='2'" @tap="seeStore">查看商家</button>
							</view>
						</view>
					</view>
					<!-- 地址 -->
					<view class="addressBox" v-if="orderInfo.status==2 && returnMethodVal==1">
						<view class="addressBoxTop">
							<view class="tipsContBox">
								<u-icon name="map" color="#666" size="48"></u-icon>
								<view class="tipsCont" v-if="storeAddress">
									<view class="tipsContTit">
										<text>{{storeAddress.name}}</text>
										<text>{{storeAddress.phone}}</text>
									</view>
									<view class="tipsContInfo">{{storeAddress.address_detail}} <text @tap="copyAddress(storeAddress.address_detail)">复制</text></view>
								</view>
							</view>
						</view>
						<view class="addressBoxBot">退货说明：包装请原样寄回，避免影响二次销售</view>
					</view>
				</view>
				<!-- 审核过了已发货已收货 -->
				<view class="result-info" v-if="orderInfo.status==2 && orderInfo.billReship!=null">
					<view class="result-info-one">
						<text>如有疑问请咨询客服</text>
						<text class="info-tips">咨询客服了解订单疑问</text>
					</view>
					<view class="">
						<button class="button1" @tap="tipsshow = true">联系客服</button>
					</view>
				</view>
			</view>
			<view class="result-message">
				<text class="message-title">退货信息</text>
				<view class="reason-top" v-for="(item,index) of orderInfo.orderItems">
					<!-- <img :src="item.image" > -->
					<dh-image class="niccImg" :src="item.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
					<view class="reason-top-name">
						<view class="name ellipsis">{{item.name}}</view>
						<view class="type">{{item.specs}}</view>
					</view>
				</view>
				<view class="message-detail">
					<view>退货原因 <text>{{orderInfo.refuse_msg}}</text></view>
					<view>退款金额 <text>￥ {{orderInfo.refund}}</text></view>
					<view>申请时间 <text>{{getdate(orderInfo.created_at,1)}}</text></view>
					<view>退款编号 <text>{{orderInfo.aftersales_id}}</text></view>
				</view>
			</view>
			<view class="result-speed">
				<text class="speed-title">售后进度</text>
				<view class="logsBox">
					<u-time-line>
						<u-time-line-item v-for="(item,index) of logs" :key="item.id">
							<template v-slot:node>
								<view class="u-node" v-if="index==0">
									<image src="../../static/img/logsLine.svg" class="logsDian"></image>
								</view>
							</template>
							<template v-slot:content>
								<view>
									<!-- <view class="u-order-desc">{{item.content}}</view> -->
									<view class="u-order-desc">
										<u-parse :html="item.content" class="detail-content"></u-parse>
									</view>
									<view class="u-order-time">{{getdate(item.created_at,1)}}</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-modal 
			v-model="tipsshow"
			title="撤销退货"
			:content="content"
			confirm-text="确认"
			cancel-text="取消"
			:show-cancel-button="true"
			confirm-color="#333333"
			cancel-color="#999999"
			:async-close="true"
			@confirm="confirmtips"
			>
		</u-modal>
		<!-- 退货方式 -->
		<u-select v-model="returnMethodShow" :list="returnMethodList" @confirm="returnMethodGet"></u-select>
		<!-- 附近商家 -->
		<u-popup v-model="nearbyShow" mode="bottom">
			<view class="nearbyStore">
				<view class="popTitle"><text>附近门店</text></view>
				<scroll-view scroll-y="true" class="storeList">
					<u-empty class="emptystyle" text="暂无附近商家" mode="list" v-if="nearbyStore.length == 0"></u-empty>
					<view v-else class="itemShop" v-for="(item,index) of nearbyStore" :key="index">
						<image :src="item.logo" alt="店铺封面"></image>
						<view class="shopRight">
							<view class="shopName">{{item.name}}</view>
							<view class="labelBox">
								<label class="state" v-if="timeRange(item.open_time.start_at,item.open_time.end_at,dateType(2)) == true">正在营业</label>
								<label class="state_close" v-else>暂停营业</label>
								<view class="distance">
									<!-- <u-icon name="arrow-left" v-show="geoDistance(lat,lon,item.lat,item.lon) <= 500"></u-icon> -->
									<text>{{item.distance}}km</text>
								</view>
							</view>
							<view class="ellipsis address">{{item.address}}</view>
						</view>
					</view>
				</scroll-view>
		</view>
		</u-popup>
	</view>
</template>

<script>
export default{
	data() {
		return{
			order_id:null,
			orderInfo:null,
			logs:[],
			// 撤销申请
			tipsshow:false,
			content:'您仅能主动撤销一次，撤销后将不能在主动撤销，且超出保障期后无法再次发起售后。',
			aftersales_id:null,
			order_id:null,
			// 倒计时时间
			termOfValidity:null,
			// 退回方式
			returnMethodVal:'1',
			returnMethod:'快递寄回',
			returnMethodShow:false,
			returnMethodList:[
				{
					value: '1',
					label: '快递寄回'
				},
				{
					value: '2',
					label: '附近商家退货'
				}
			],
			// 邮寄时商家的地址
			storeId:null,
			storeAddress:null,
			// 附近商家获取信息
			nearbyShow:false,
			nearbyStore:[],
			nearPage:1,
			nearPagesize:20,
			lat:0,
			lon:0,
		}
	},onShow() {
		this.getOrderInfo(this.order_id);
	},
	onLoad: function (option) {
		this.order_id = option.id;
		// this.getOrderInfo(option.id);
		this.isGetLocation();
	},
	methods:{
		// 获取定位
		getAuthorizeInfo(a="scope.userLocation"){  //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
			var _this=this;
			uni.authorize({
				scope: a,
				success() { //1.1 允许授权
					_this.getLocationInfo();
				},
				fail(){    //1.2 拒绝授权
					console.log("你拒绝了授权，无法获得周边信息")
				}
			})
		},
		getLocationInfo(){  //2. 获取地理位置
			var _this=this;
			uni.getLocation({
				type: 'gcj02',
				success (res) {
					_this.lat = res.latitude;
					_this.lon = res.longitude;
				}
			});
		},
		isGetLocation(a="scope.userLocation"){ // 3. 检查当前是否已经授权访问scope属性，参考下截图
			var _this=this;
			uni.getSetting({
				success(res) {
					if (!res.authSetting[a]) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
						_this.getAuthorizeInfo()
					}else{
						_this.getLocationInfo()
					}
				}
			});
		},
		getOrderInfo(id){
			this.apiget('/fun/bill-aftersales/view',{id:id}).then(res =>{
				if(res.data.status == 200 ) {
					this.orderInfo = res.data.data;
					this.logs = res.data.data.log;
					this.storeId = res.data.data.owner_id;
					this.termOfValidity = res.data.data.termOfValidity;
					this.getStoreAddress();
				}
			})
		},
		//退货方式选择
		returnMethodShowGo(){
			this.returnMethodShow = true;
		},
		returnMethodGet(val){
			if(val[0].value==1){
				this.nearbyStore = [];
				this.getStoreAddress();
			}
			this.returnMethodVal = val[0].value;
			this.returnMethod = val[0].label;
		},
		// 获取商家地址
		getStoreAddress(){
			this.apiget('/fun/ship-address/self',{}).then(res =>{
				if(res.data.status == 200 ) {
					this.storeAddress = res.data.data;
				}
			})
		},
		// 复制地址
		copyAddress(address){
			uni.setClipboardData({
			    data: address,
			    success: function () {
			        
			    }
			});
		},
		// 填写退货物流
		fillReturnLogistics(id){
			uni.navigateTo({
				url: './fillReturnLogistics?id='+id
			});
		},
		// 查看商家
		seeStore(){
			// this.nearbyShow = false;
			this.nearbyStore = [];
			this.getNearbyStore();
			this.nearbyShow = true;
		},
		// 获取附近商家列表
		getNearbyStore(){
			// this.nearbyStore = [];
			this.apiget('/shop/store-front/search-store',{page:this.nearPage,pageSize:this.nearPagesize,lat:this.lat,lon:this.lon}).then(res =>{
				if(res.data.status == 200 ) {
					this.nearbyStore = this.nearbyStore.concat(res.data.data.list);
				}
			})
		},
		// 撤销申请
		revokeApply(aftersales_id,order_id){
			this.tipsshow = true;
			this.aftersales_id = aftersales_id,
			this.order_id = order_id;
		},
		confirmtips() {
			var _this = this;
			_this.tipsshow = false;
			this.apipost('/fun/bill-aftersales/cancel-after-sales',{aftersales_id:this.aftersales_id,order_id:this.order_id}).then(res =>{
				if(res.data.status == 200 ) {
					uni.showToast({
						icon: 'success',
						duration:1000,
						title: '撤销成功',
						success: ress => {
							setTimeout(function (){
								_this.getOrderInfo(_this.aftersales_id);
							}, 1000);
						},
					});
				}
			})
		}
	}
}
</script>

<style lang="scss">
	.refund-result{
		width: 100%;
		height: 100%;
		background: #f5f5f5;
		.result-title{
			display: flex;
			height: 80rpx;
			line-height: 80rpx;
			background: #fff;
			hr{
				margin: 28rpx 24rpx 0 0;
				width: 8rpx;
				height: 24rpx;
				border: none;
				background: #EB4B34;
				
			}
			.title{
				color: #FF5238;
				font-size: 28rpx;
			}
		}
		.result-info{
			width: 100%;
			// height: 176rpx;
			background: #fff;
			padding: 46rpx 32rpx;
			display: flex;
			align-items: center;
			
			.result-info-one{
				flex: auto;
			}
			text{
				display: block;
				color: #333333;
				font-size: 28rpx;
			}
			.info-tips{
				color: #666666;
				font-size: 24rpx;
			}
			button{
				width: 144rpx;
				height: 56rpx;
				background-color: #fff;
				border: 2rpx solid #999;
				color: #999;
				border-radius: 30rpx;
				line-height: 56rpx;
				font-size: 24rpx;
			}
		}
		
		
		.approved{
			font-size: 28rpx;
			line-height: 44rpx;
			color: #333;
			
			text{
				color: #666;
			}
			
			.returnMethod{
				padding: 28rpx 32rpx;
				display: flex;
				align-items: center;
				background-color: #fff;
				
				.methodVal{
					flex: auto;
					padding-left: 32rpx;
				}
			}
			
			.handleBox{
				padding: 0 32rpx 36rpx;
				
				.handleCont{
					padding: 24rpx 32rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					border-radius: 0px 0px 16rpx 16rpx;
					
					.handleContLeft{
						flex: auto;
						
						.handleTips{
							font-size: 28rpx;
							line-height: 44rpx;
							color: #333;
						}
						
						.handledown{
							font-size: 24rpx;
							line-height: 40rpx;
							color: #666;
						}
					}
					
					.handleContRight{
						padding-left: 32rpx;
						
						button{
							width: 144rpx;
							height: 56rpx;
							background-color: #fff;
							border: 2rpx solid #999;
							color: #999;
							border-radius: 30rpx;
							line-height: 56rpx;
							font-size: 24rpx;
						}
						.button1{
							border: 2rpx solid #FF5238;
							color: #FF5238;
						}
						.mb16{
							margin-bottom: 16rpx;
						}
					}
				}
			}
			
			.addressBox{
				background-color: #fff;
				
				.addressBoxTop{
					.tipsContBox{
						// min-height: 100rpx;
						padding: 0 32rpx;
						display: flex;
						background-color: #fff;
						border-radius: 16rpx;
						
						.tipsCont{
							padding: 24rpx 0 20rpx;
							flex: auto;
							margin-left: 32rpx;
							box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.02);
							
							.tipsContTit{
								font-size: 32rpx;
								line-height: 48rpx;
								color: #333;
								
								text{
									margin-right: 20rpx;
								}
							}
							.tipsContInfo{
								font-size: 24rpx;
								line-height: 40rpx;
								color: #333;
								
								text{
									margin-left: 32rpx;
									color: #40A9FF;
								}
							}
						}
					}
				}
				
				.addressBoxBot{
					height: 60rpx;
					font-size: 24rpx;
					line-height: 60rpx;
					color: #666;
					text-align: center;
				}
			}
			
		}
		
		
		.result-message{
			width: 100%;
			// height: 518rpx;
			background: #fff;
			padding: 24rpx 32rpx;
			margin: 16rpx 0;
			.message-title{
				font-size: 32rpx;
				color: #333333;
				display: block;
				padding-bottom: 48rpx;
			}
			.reason-top{
				width: 100%;
				height: 160rpx;
				background-color: #fff;
				display: flex;
				
				img{
					width: 116rpx;
					height: 116rpx;
					border-radius: 8rpx;
					margin-right: 32rpx;
				}
				
				.niccImg{
					width: 116rpx;
					height: 116rpx;
					border-radius: 8rpx;
					margin-right: 32rpx;
				}
				
				.reason-top-name{
					// width: 60%;
					flex: auto;
					width: 1px;
					height: 90rpx;
					padding-top: 12rpx;
					.name{
						color: #333333;
						font-size: 32rpx;
						
					}
					.type{
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
			.message-detail{
				view{
					line-height: 56rpx;
					color: #666666;
					font-size: 28rpx;
				}
				text{
					color: #333333;
					font-size: 28rpx;
					padding-left: 20rpx;
				}
			}
		}
		.result-speed{
			width: 100%;
			min-height: 360rpx;
			background: #fff;
			padding: 24rpx 32rpx;
			.speed-title{
				font-size: 32rpx;
				color: #333333;
				display: block;
				padding-bottom: 8rpx;
			}
			
			.logsBox{
				padding-top: 38rpx;
				
				.logsDian{
					width: 32rpx;
					height: 32rpx;
				}
				
				.u-order-desc{
					font-size: 28rpx;
					line-height: 44rpx;
					color: #666666;
				}
				
				.u-order-time{
					font-size: 24rpx;
					line-height: 36px;
					color: #666666;
				}
			}
		}
	}
	.nearbyStore{
		padding: 0 32rpx;
		
		.popTitle{
			padding: 28rpx 0;
			font-size: 28rpx;
			line-height: 28rpx;
			color: #333;
			border-bottom: 1rpx solid #E;
			
			text{
				padding-left: 24rpx;
				border-left: 8rpx solid #FF5238;
			}
		}
		
		.storeList{
			height: 720rpx;
			
			.itemShop {
				background-color: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 16rpx;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				line-height: 40rpx;
			
				image {
					width: 186rpx;
					height: 140rpx;
					margin-right: 20rpx;
					border-radius: 16rpx;
				}
			
				.shopRight {
					width: 1px;
					flex: auto;
			
					.labelBox {
						display: flex;
						align-items: center;
						margin-top: 10rpx;
					}
			
					label {
						padding: 0 8rpx;
						background: #FFEEEC;
						font-size: 22rpx;
						color: #FF5238;
						margin-right: 8rpx;
						border-radius: 4rpx;
						// border: 1rpx solid #FF5238;
					}
					.state_close{
						padding: 0 8rpx;
						background: #ECEEF0;
						font-size: 22rpx;
						color: #999999;
						margin-right: 8rpx;
						border-radius: 4rpx;
						// border: 1rpx solid #999;
					}
					.phone {
						background-color: #FFFFFF;
						color: #FF5238;
						border: 1rpx solid #FF5238;
					}
			
					.distance {
						margin-left: auto;
						font-size: 22rpx;
						color: #666666;
					}
				}
			
				.shopName {
					font-size: 32rpx;
					font-weight: 500;
				}
			}
		}
	}
</style>
